<template>
	<view class="wanlshop-classify-container">
		<!-- {{mainHeight}} -->
		<block v-if="categoryStyle === 1">
			<scroll-view :style="{ height: `${mainHeight}px` }" scroll-y class="wanlshop-classify-container__one">
				<view class="item" v-for="(item, index) in categoryData" :key="item.id"
					@tap="handleProduct(item.id, item.name)">
					<image :src="$wanlshop.oss(item.image, 350, 150)" class="list-image" />
					<view class="category-title">
						<view>{{ item.description }}</view>
						<text class="text-sm text-bold text-black">- {{ item.name }} -</text>
					</view>
				</view>
			</scroll-view>
		</block>
		<block v-else-if="categoryStyle === 2">
			<scroll-view class="wanlshop-classify-container__grid" :style="{ height: `${mainHeight}px` }" scroll-y>
				<view class="cu-list grid col-3 no-border">
					<view class="cu-item" v-for="(item, index) in categoryData" :key="item.id"
						@tap="handleProduct(item.id, item.name)">
						<image :src="$wanlshop.oss(item.image, 80, 80)" class="list-image" />
						<text>{{ item.name }}</text>
					</view>
					<view class="safeAreaBottom"></view>
				</view>
			</scroll-view>
		</block>
		<block v-else-if="categoryStyle === 3">
			<view class="wanlshop-classify-container__list">
				<scroll-view scroll-y scroll-with-animation class="left" :scroll-top="scrollTop"
					:style="{ height: `${mainHeight}px` }">
					<view v-for="(item, index) in categoryData" :key="item.id" class="item"
						:class="[categoryIndex == index ? 'active' : '']" :data-current="index">
						<div class="item-name" @tap.stop="handleNav(item, index)">
							<div>{{ item.name }}</div>
							<img style="width:20px;height:20px;"
								:src="index == categoryIndex ? 'https://zm.zonmay.com/public/static/image/icons/class-arrow-bottom.png':'https://zm.zonmay.com/public/static/image/icons/class-arrow-right.png'"
								alt="">

						</div>
						<div v-if="item.child && item.showChild">
							<div @tap="getList(child.id,childIndex)" class="item-child"
								v-for="(child, childIndex) in item.child" :key="childIndex"
								:class="{ 'active': childIndex == categoryChildIndex  }">
								<text style="margin-left:10px">{{ child.name }}</text>
							</div>
						</div>
					</view>
				</scroll-view>
				<block>
					<scroll-view scroll-y class="right" :style="{ height: `${mainHeight}px` }">
						<block v-if="good_list.length==0">
							<div class="queshen nodata" tapmode>
								<img src="https://zm.zonmay.com/public/static/image/bg/bg-nonecar.png"
									style="width:100px;" />
								<div
									style="font-size:14px;font-family:PingFangSC-Regular;font-weight:400;color:#B3B3B3;margin-top:0.27rem;width:100%; text-align: center;">
									暂无数据
								</div>
							</div>
						</block>
						<div class="list-item" v-for="(item, index) in good_list" :key="index"
							@tap="handleGoods(item.id)">
							<div class="image-wrap">
								<div class="type_name tj" v-if="item.sign">{{item.sign}}</div>
								<image :src="item.cover" mode="scaleToFill" />
							</div>

							<div class="container">
								<div class="title">{{ item.title }} </div>
								<div class="tags">
									<div v-for="(v, i) in item.service_name" :key="i" class="tags-item">
										{{ v }}
									</div>
								</div>
								<div class="retail-price">
									零售价:￥
									<text class="yuan">{{ price_format("yuan", item.current_price) }}</text>
									<text class="fen">.{{ price_format("fen", item.current_price) }}</text>
									<span>/{{item.unit_name}}</span>
								</div>
								<div class="price" v-if="item.vip_show>0">
									会员价:￥
									<text class="yuan">{{ price_format("yuan", item.vip_price) }}</text>
									<text class="fen">.{{ price_format("fen", item.vip_price) }}</text>
									<text>/{{ item.unit_name }}</text>
								</div>
							</div>
						</div>
						<!-- <view class="list-cat">
                            <swiper
                                class="screen-swiper square-dot"
                                indicator-dots
                                circular
                                autoplay
                                interval="4000"
                                duration="500"
                                v-if="adverData && adverData[item.id]"
                            >
                                <swiper-item v-for="(adverts, adindex) in adverData[item.id]" :key="adindex" @tap="onAdvert(adverts)">
                                    <image lazy-load class="radius-bock" :src="$wanlshop.oss(adverts.media, 350, 0, 1)" mode="aspectFill"></image>
                                </swiper-item>
                            </swiper>
                            <view class="padding-top-sm">
                                <view class="list-item radius-bock">
                                    <view class="list-container">
                                        <view
                                            class="list-box"
                                            v-for="(category, infokey) in item.childlist"
                                            :key="category.id"
                                            @tap="handleProduct(category.id, category.name)"
                                        >
                                            <image lazy-load :src="$wanlshop.oss(category.image, 60, 60)" class="list-image" />
                                            <view class="text-sm">{{ category.name }}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view> -->
					</scroll-view>
				</block>
			</view>
		</block>
		<block v-else-if="categoryStyle === 4">
			<view class="wanlshop-classify-container__list">
				<scroll-view scroll-y scroll-with-animation class="left" :scroll-top="scrollTop"
					:style="{ height: `${mainHeight}px` }">
					<view v-for="(item, index) in categoryData" :key="item.id" class="item"
						:class="[currentTab == index ? 'active' : '']" :data-current="index" @tap.stop="handleNav">
						<text>{{ item.name }}</text>
					</view>
					<view class="edgeInsetBottom"></view>
				</scroll-view>
				<block v-for="(item, index) in categoryData" :key="item.id">
					<scroll-view scroll-y class="right" :style="{ height: `${mainHeight}px` }"
						v-if="currentTab == index">
						<view class="list-cat">
							<swiper class="screen-swiper square-dot" indicator-dots circular autoplay interval="4000"
								duration="500" v-if="adverData && adverData[item.id]">
								<swiper-item v-for="(adverts, adindex) in adverData[item.id]" :key="adindex"
									@tap="onAdvert(adverts)">
									<image lazy-load class="radius-bock" :src="$wanlshop.oss(adverts.media, 350, 0, 1)"
										mode="aspectFill"></image>
								</swiper-item>
							</swiper>
							<view class="padding-top-sm">
								<view class="list-item radius-bock" v-for="(childlist, childkey) in item.childlist"
									:key="childlist.id">
									<view class="flex justify-between text-sm"
										@tap="handleProduct(childlist.id, childlist.name)">
										<text>{{ childlist.name }}</text>
										<text class="wlIcon-fanhui2 wanl-gray-light"></text>
									</view>
									<view class="list-container">
										<view class="list-box" v-for="(category, infokey) in childlist.childlist"
											:key="category.id" @tap="handleProduct(category.id, category.name)">
											<image lazy-load :src="$wanlshop.oss(category.image, 60, 60)"
												class="list-image" />
											<view class="text-sm">{{ category.name }}</view>
										</view>
									</view>
								</view>
								<view class="edgeInsetBottom"></view>
							</view>
						</view>
					</scroll-view>
				</block>
			</view>
		</block>
		
		<view class="cu-modal bottom-modal" :class="modalName == 'showcity' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog text-bold" @tap.stop="">
				<view class="wanl-modal">
					<view class="head padding-bj">
						<view class="content">
							<view class="text-lg">选择配送分仓</view>
						</view>
						<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
					</view>
					<view class="dingwei" v-if="hotList.length>0">
						
						<view class="dingwei_city dingwei_city_zuijin">
							<view class="dingwei_city_one" v-for="(item,index) in hotList" :key="index"
								@tap="to_city(item.categoryname)">
								{{item.store_name}} <span style="color:#005a93">({{item.city_name}})</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		name: "wanlShopClassify",
		props: {
			shopId: {
				type: Number,
				default: 0,
			},
			categoryStyle: {
				type: Number,
				default: 1,
			},
			mainHeight: {
				type: Number,
				default: 0,
			},
			adverData: {
				type: Object,
				default () {},
			},
			categoryDatas: {
				type: Array,
				default: () => {
					return [];
				},
			},
			cur_index: {
				type: Number,
				default: -1,
			},
			child_index: {
				type: Number,
				default: -1,
			},
			cur_id: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				hotList:{},
				modalName:null,
				currentTab: 0, //预设当前项的值
				scrollTop: 0, //tab标题的滚动条位置
				categoryData: [],
				good_list: [],
				city_name: "托普·平邑仓",
				categoryIndex: 0,
				categoryChildIndex: 0,
			};
		},
		watch: {
			categoryDatas(v) {
				// alert(this.cur_index)
				this.categoryData = v;
				this.categoryIndex = this.cur_index;
				this.categoryData[this.cur_index].showChild = true;
				// alert(this.child_index)
				if (this.child_index == '-1') {
					this.getList(this.categoryData[this.cur_index].id, -1);
				} else {
					this.getList(this.cur_id, this.child_index);
				}
				this.getHotList()

			},
		},
		methods: {
			async getHotList() {
			
				await uni.request({
					url: '/api/home/get_xcx_hot_list',
					data: {},
					success: res => {
						this.hotList = res.data
					}
				});
			},
			to_city(item, hasLocation = false) {
				// console.log(333,item);
				// this.$store.commit('getCity',item.city_name)
				// console.log(item)
				uni.setStorageSync('city_name', item)
				this.hideModal()
				this.getList(this.cur_id, this.child_index);
			},
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					this.modalName = null;
				}
			},
			// 弹出层
			showModal(name) {
				this.isChoice = '';
				// 滚动下分享
				if (name == 'share' && this.modalName != 'share') {
					setTimeout(() => {
						this.scrollAnimation = 0;
					}, 300);
				}
				this.modalName = name;
			},
			async getList(id, index) {
				// alert(id)

				this.categoryChildIndex = index
				console.log(this.categoryChildIndex)


				uni.setStorageSync('child_index', index)

				uni.setStorageSync('cur_id', id)


				this.good_list = [];
				let _this = this;
				await uni.request({
					url: `/api/Good/goodList`,
					method: "POST",
					data: {
						page: 1,
						good_type_id: id,
						region_name: uni.getStorageSync("city_name"),
						token: uni.getStorageSync("wanlshop:user").token
					},
					success: (res) => {
						_this.good_list = res.data;
						// alert(_this.good_list.length)
						//2024年5月25日10:28:05
						if(res.status==0){
							this.showModal('showcity');
						}
					},
				});


			},
			price_format: function(type, price) {
				var status = (price + "").indexOf(".");
				if (status == "-1") {
					if (type == "yuan") {
						return price;
					}
					if (type == "fen") {
						return "00";
					}
				}
				var price_array = (price + "").split(".");
				if (type == "yuan") {
					return price_array[0];
				}
				if (type == "fen") {
					var price_fen = price_array[1].length < 2 ? price_array[1] + "0" : price_array[1];
					return price_fen;
				}
			},
			handleGoods(id) {

				this.$wanlshop.to(`/pages/product/goods?good_id=${id}`);
			},
			// 点击标题切换当前页时改变样式
			handleNav(e, index) {

				if (this.categoryStyle == 3) {
					this.categoryIndex = index;
					let copylist = JSON.parse(JSON.stringify(this.categoryData));
					copylist.forEach((item, i) => {
						if (index == i) {
							item.showChild = true;
							uni.setStorageSync('cur_index', index)
							console.log(JSON.stringify(this.categoryData[index].id))
							// alert(index)
							// if(this.cur_index == 0 ){
							this.getList(this.categoryData[index].id, -1);
							// }

						} else {
							item.showChild = false;
						}
					});
					this.categoryData = copylist;
					this.currentTab = e;
					this.checkCor();

					return;
				}
				let cur = e.currentTarget.dataset.current;
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur;
					this.checkCor();
				}
			},
			handleProduct(category_id, category_name) {
				if (this.shopId === 0) {
					this.$wanlshop.to(
						`/pages/product/list?data=${JSON.stringify({ category_id: category_id, category_name: category_name })}`
					);
				} else {
					this.$wanlshop.to(
						`/pages/shop/product/list?shop_id=${this.shopId}&category_id=${category_id}&category_name=${category_name}`
					);
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor() {
				if (this.currentTab > 7) {
					this.scrollTop = 500;
				} else {
					this.scrollTop = 0;
				}
			},
		},
	};
</script>

<style lang="scss">
	
	.dingwei {
		width: 90%;
		margin: auto;
		padding-top: 25rpx;
		box-sizing: border-box;
		margin-bottom: 26rpx;
	}
	
	.dingwei .grey {
		margin-bottom: 25rpx;
	}
	
	.dingwei_city {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	
	.dingwei_city_one {
		height: 60rpx;
		background-color: #F5F5F5;
		border-radius: 30rpx;
		font-size: 30rpx;
		padding: 0 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 20rpx 20rpx 0;
	}
	
	
	.dingweis {
		width: 32rpx;
		height: 32rpx;
	}
	
	.dingwei_city_zuijin {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	
	page {
		background-color: #fff;

	}

	.nodata {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	// .queshen {
	// 	width: calc(100vw - 1rem);
	// 	height: 100vh;
	// 	position: fixed;
	// 	right: 0;
	// 	top: 2rem;
	// 	z-index: 10;
	// 	text-align: center
	// }

	uni-image>div,
	uni-image>img {
		width: 50px;
		height: 50px;
	}

	.wanlshop-classify-container {

		background-color: #fff;

		&__one {
			padding-left: 25rpx;
			padding-right: 25rpx;
			padding-bottom: 100rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);

			image {
				width: 100%;
				height: 300rpx;
				border-radius: 15rpx;
				overflow: hidden;
			}

			.item {
				position: relative;
				display: flex;
				justify-content: center;
				margin-top: 25rpx;

				.category-title {
					font-size: 26rpx;
					position: absolute;
					bottom: 20rpx;
					border-radius: 10rpx;
					overflow: hidden;
					color: #666666;
					background-color: rgba(255, 255, 255, 0.6);
					width: 60%;
					text-align: center;
					padding: 4rpx 0;
				}
			}
		}

		&__grid {
			padding-bottom: 100rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);

			.cu-list {
				background-color: rgba(255, 255, 255, 0);

				&>.cu-item {
					padding: 25rpx 0;
					align-items: center;

					image {
						width: 160rpx;
						height: 160rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}

		&__list {
			display: flex;

			.left {
				width: 29%;
				z-index: 10;
				background: #fbfbfb;
				margin-top: 10px;

				.item {
					width: 100%;
					min-height: 110rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					font-size: 26rpx;
					color: #444;
					font-weight: 400;
					background: #fff;
					width: 100%;
					// padding-left: 10rpx;

					&-name {
						line-height: 80rpx;
						height: 80rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						padding-left: 15rpx;
						font-weight: 600;
						font-size: 28rpx;
					}

					&-child {
						height: 80rpx;
						width: 100%;
						text-align: left;
						line-height: 80rpx;
						color: #005a93;
						padding-left: 5rpx;

						&.active {
							position: relative;
							color: #000;
							font-size: 26rpx;
							font-weight: 600;
							// background: white;
							background: rgba(0, 90, 147, 0.1);
							color: rgba(128, 128, 128, 1);
							position: relative;

							&::before {
								content: "";
								position: absolute;
								border-left: 2rpx solid #005a93;
								height: 80rpx;
								left: 0;
							}
						}
					}

					&.active {
						position: relative;
						color: #000;
						font-size: 26rpx;
						// font-weight: 600;
						background: white;

						// &::before {
						// 	content: "";
						// 	position: absolute;
						// 	border-left: 2rpx solid #005a93;
						// 	height: 80rpx;
						// 	left: 0;
						// }
					}
				}
			}

			.right {
				width: 71%;
				padding-left: 5rpx;
				box-sizing: border-box;

				/* background-image: linear-gradient(#fff, #f2f2f2, #f4f4f4, #f6f6f6); */
				.list-cat {
					width: 100%;
					overflow: hidden;
					padding-top: 10rpx;
					padding-right: 20rpx;
					box-sizing: border-box;
				}

				.screen-swiper {
					min-height: 180rpx;
					height: 180rpx;
					overflow: hidden;
				}

				.list-item {
					background: #ffffff;
					width: 100%;
					box-sizing: border-box;
					padding: 20rpx;
					margin-bottom: 10rpx;

					.title {
						font-weight: 600;
						color: #222;
						lines: 2;
						text-overflow: ellipsis;
						overflow: hidden;
						/* #ifndef APP-PLUS */
						white-space: normal;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						/* #endif*/
					}
				}

				.list-container {
					/* padding-top: 20rpx; */
					display: flex;
					display: -webkit-flex;
					justify-content: flex-start;
					flex-direction: row;
					flex-wrap: wrap;
				}

				.list-box {
					width: 33.3333%;
					text-align: center;
					padding-top: 40rpx;
				}

				.list-image {
					// width: 200rpx;
					height: 100%;
				}

			}
		}
	}

	.list-item {
		margin-top: 20rpx;
		display: flex;
		background: #fff;
		box-sizing: border-box;
		padding: 10rpx;
		border-radius: 10rpx;

		.image-wrap {
			position: relative;
			overflow: hidden;
			border-radius: 10rpx;
			width: 180rpx;
			height: 180rpx;
			min-width: 180rpx;

			.type_name {
				position: absolute;
				background: #4385ea;
				left: 0;
				bottom: 0;
				padding: 5rpx 15rpx;
				box-sizing: border-box;
				z-index: 111;
				color: #fff;
				font-size: 24rpx;
			}

			image {
				width: 100%;
				height: 100%;
				// min-width:100%;
			}
		}

		.container {
			padding-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.title {
				font-size: 28rpx;
				color: #2e2e2e;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
			}

			.tags {
				display: flex;
				align-items: center;
				font-size: 22rpx;
				margin-top: 5px;
				font-weight: 600;

				&-item {
					background: #eff9ff;
					border-radius: 4rpx;
					border: 1rpx solid #005a93;
					color: #005a93;
					margin-right: 10rpx;
					flex-shrink: 0;
					padding: 3rpx;
				}
			}

			.retail-price {
				color: #214a75;
				font-size: 26rpx;
				font-weight: 600;
				margin-top: 5px;

				.yuan {
					font-size: 34rpx;
				}

				.fen {
					font-size: 30rpx;
				}
			}

			.price {
				color: #e90000;
				font-size: 26rpx;
				font-weight: 600;

				.yuan {
					font-size: 34rpx;
				}

				.fen {
					font-size: 30rpx;
				}
			}
		}
	}
</style>